<template>
    <el-card
        class="login-card"

        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-form
            :model="form"
            :rules="rules"
            ref="formRef"
            @keyup.enter="submit()"
            class="form"
            status-icon>
            <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="账户">
                </el-input>
            </el-form-item>
            <el-form-item prop="passwd">
                <el-input v-model="form.passwd" placeholder="密码" show-password>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submit()">登陆
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts">
import {defineComponent, inject, reactive, ref, toRefs} from "vue";
import HttpClient from "@/classes/HttpClient";
import {LoginIn} from "@/classes/Login";
import {Rules} from "async-validator";
import {useRouter} from "vue-router";
import ElForm, {ElCard, ElFormItem, ElInput} from "element-plus";
import ElButton from "element-plus";

export default defineComponent({

    emits:[],

    components: {
        'el-card': ElCard,
        'el-form-item': ElFormItem,
        'el-form': ElForm,
        'el-input': ElInput,
        'el-button': ElButton
    },
    setup() {
        const login = new LoginIn();

        login.name = "test"
        login.passwd = "test"

        const form = reactive(login)

        const data = reactive({
            loading: false
        })

        const rules = reactive(function () {
            return {
                username: [{required: true, message: '账户不能为空', trigger: 'blur'}],
                password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
            }
        }())

        const http: HttpClient | undefined = inject('$http')

        const formRef = ref()

        const router = useRouter()

        return {
            ...toRefs(data),
            formRef,
            form,
            http,
            rules,
            router
        }
    },
    methods: {
        submit() {
            this.formRef.validate((valid: Rules) => {

                if (!valid) {
                    return
                }
            })

            this.router.push({path: '/main/index'})

            // this.http?.request<LoginOut>(Paths.LOGIN).then((res: Result<LoginOut>) => {
            //
            // }).catch(reason => {
            //
            // })
        }
    }
})
</script>

<style scoped lang="scss">
.login-card {
    //position: absolute;
    //transform: translate(50%, 50%);

    margin: 0 auto;
    width: 500px;

    .form {

    }
}
</style>